<!--
 * @Author: 汪军 624473119@qq.com
 * @Date: 2023-10-10 18:15:53
 * @LastEditors: 汪军 624473119@qq.com
 * @LastEditTime: 2023-10-19 11:06:15
 * @FilePath: \ekee-web\src\views\end\easy-link\EasyLink.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template lang="pug">
.add-specification
  .title.flex.justify-center.bold.mb4 {{ recordId ? "编辑规格" : "添加规格" }}
  .form-content.flex
    .require.w100
      el-form(
        ref="formRef",
        :model="form",
        :rules="rules",
        label-position="left",
        label-width="120px",
        status-icon
      )
        el-form-item(label="规格名称：", prop="name")
          el-input(
            v-model="form.name",
            placeholder="请输入",
            maxlength="10",
            clearable
          )
        el-form-item(label="图片：", prop="image")
          el-upload.avatar-uploader(
            action="https://api.ekee.com.cn/api/common/upload",
            :show-file-list="false",
            :on-success="handleAvatarSuccess"
          )
            <img v-if="form.image" :src="form.image" class="avatar" />
            <el-icon v-else class="avatar-uploader-icon">  <Plus /></el-icon>
        el-form-item(label="单价：", prop="price")
          el-input(
            v-model="form.price",
            placeholder="请输入",
            clearable,
            type="number",
            max="99999999",
            min="0"
          )
        el-form-item(label="库存：", prop="stock")
          el-input(
            v-model="form.stock",
            placeholder="请输入",
            clearable,
            type="number",
            max="99999999",
            min="0"
          )
        el-form-item(label="最小起换量：", prop="min_sales_quantity")
          el-input(
            v-model="form.min_sales_quantity",
            placeholder="请输入",
            clearable,
            type="number",
            max="99999",
            min="0"
          )
  .flex.justify-center.mt4.mb4
    el-button.btn(
      type="primary",
      size="large",
      plain,
      round,
      @click="onCancel(formRef)"
    ) 取消
    el-button.btn(
      type="primary",
      size="large",
      round,
      @click="onConfirm(formRef)"
    ) 确认
  //- 不文明提示
  el-dialog(
    v-model="nocivilizationVisible",
    width="564",
    align-center,
    :show-close="true",
    :destroy-on-close="true",
    style="border-radius:12px"
    center
  )
    .nocivilizationtittle {{ nocivilizationMsg }}
    .nocivilizationinfo(v-for="(item, index) in nocivilizationInfo") {{ index + 1 }}.{{ item.msg }}
      .infoMsg(v-for="(gitem, gindex) in item.words") {{ gitem }}
</template>

<script setup>
import { onMounted, ref } from "vue";
import { GoodsSave } from "@/api/outmanagement";
const props = defineProps({
  recordId: "",
  editGoodsSaveInfo: {},
  goodsId: "",
  goods_id:'',
});
onMounted(() => {
  console.log('被编辑的规格id',props.recordId);
  console.log('最外层商品id',props.goods_id);

  if (props.recordId) {

    form.value.id = props.recordId;
    form.value.goods_id = props.goods_id;

    form.value.name = props.editGoodsSaveInfo.name;
    form.value.image = props.editGoodsSaveInfo.image;
    form.value.price = props.editGoodsSaveInfo.price;
    form.value.stock = props.editGoodsSaveInfo.stock;
    form.value.min_sales_quantity = props.editGoodsSaveInfo.min_sales_quantity;

    // console.log('props.editGoodsSaveInfo',props.editGoodsSaveInfo);
  }
  else{
    form.value.goods_id = props.goods_id;
    form.value.id = '';
  }
});
const formRef = ref();
const rules = ref({
  name: [
    {
      required: true,
      message: "请输入规格名称",
      trigger: "blur",
    },
  ],
  image: [
    {
      required: true,
      message: "请选择图片",
      trigger: "change",
    },
  ],
  price: [
    {
      required: true,
      message: "请输入单价",
      trigger: "blur",
    },
  ],
  stock: [
    {
      required: true,
      message: "请输入库存",
      trigger: "blur",
    },
  ],
  min_sales_quantity: [
    {
      required: true,
      message: "请输入最小起换量",
      trigger: "blur",
    },
  ],
});
const form = ref({
  id: "", //规格ID，编辑时必传
  goods_id: "0", //商品ID，不存在时传0
  name: "",
  image: "",
  price: "",
  stock: "",
  min_sales_quantity: "",
});

const emits = defineEmits(["cancel", "confirm"]);

//上传
const handleAvatarSuccess = (response, uploadFile) => {
  console.log("上传", response, uploadFile);
  form.value.image = response.data.url;
  // formData.value.list.push({
  //   name: uploadFile.name,
  //   path: response.data.fullurl,
  // });
};

// 取消
const onCancel = (formEl) => {
  if (!formEl) return;
  // formEl.resetFields();
  form.value = props.editGoodsSaveInfo;
  emits("cancel");
};
const nocivilizationVisible = ref(false);
const nocivilizationInfo = ref([]);
const nocivilizationMsg = ref("");
// 确认
//当是编辑的时候不调取接口
const onConfirm = (formEl) => {
  if (!formEl) return;
  // if (form.value.name ='') {
  //   ElMessage({ message: '请输入规格名称', type: "warning" });
  //   return;
  // }
  // if (form.value.image='') {
  //   ElMessage({ message: '请上传规格图片', type: "warning" });
  //   return;
  // }
  // if (form.value.price ='') {
  //   ElMessage({ message: '请输入单价', type: "warning" });
  //   return;
  // }
  // if (form.value.stock='') {
  //   ElMessage({ message: '请输入库存数量', type: "warning" });
  //   return;
  // }
  // if (form.value.min_sales_quantity='') {
  //   ElMessage({ message: '请输入最小起换量', type: "warning" });
  //   return;
  // }

  if (Number(form.value.price) <=0) {
    ElMessage({ message: '您输入的单价过低，请重新输入', type: "warning" });
    return;
  }
  if (Number(form.value.stock)<=0) {
    ElMessage({ message: '您输入的库存数量过低，请重新输入', type: "warning" });
    return;
  }
  if (Number(form.value.min_sales_quantity)<=0) {
    ElMessage({ message: '您输入的最小起换量过底，请重新输入', type: "warning" });
    return;
  }
  if (Number(form.value.price) > 99999999) {
    ElMessage({ message: '您输入的单价过高，请重新输入', type: "warning" });
    return;
  }
  if (Number(form.value.stock)>99999999) {
    ElMessage({ message: '您输入的库存数量过大，请重新输入', type: "warning" });
    return;
  }
  if (Number(form.value.min_sales_quantity)>99999) {
    ElMessage({ message: '您输入的最小起换量过大，请重新输入', type: "warning" });
    return;
  }
  formEl.validate((valid, fields) => {
    if (valid) {
      GoodsSave(form.value).then((res) => {
        if (res.code == 1) {
          ElMessage({ message: res.msg, type: "success" });
          //获取新增的规格列表
          form.value.id = res.data.id;
          emits("confirm", form.value);
        }

        if (res.code == 0) {
          ElMessage({ message: res.msg, type: "warning" });
        }
        if (res.data.code == 402) {
        nocivilizationMsg.value = res.data.msg;
        nocivilizationInfo.value = res.data.data;
        nocivilizationVisible.value = true;
      }
      if (res.data.code == 403) {
        nocivilizationMsg.value = res.data.msg;
        nocivilizationInfo.value = res.data.data;
        nocivilizationVisible.value = true;
      }
      });
    } else {
      console.log("error submit!", fields);
      console.log('444',444);
    }
  });
};
</script>

<style lang="stylus" scoped>
.nocivilizationtittle {
  background-color: #F5F5F5;
  font-size: 16px;
  font-family: PingFang SC, PingFang SC;
  font-weight: bold;
  color: rgba(0, 0, 0, 0.87);
  line-height: 22px;
  padding: 10px;
}

.nocivilizationinfo {
  margin-top: 16px;
}

.infoMsg {
  margin-top: 16px;
  text-indent: 10px;
}
.add-specification {
  .title {
    font-size: 24px;
  }

  .form-content {
    padding: 0px 66px;

    .require {
      padding: 16px 12px;
      border: 1px solid #E6E6E6;
    }

    .no-require {
      margin-left: 32px;
      padding: 16px 12px;
      border: 1px solid #E6E6E6;
    }
  }

  .input-width {
    width: 245px;
  }

  .btn {
    width: 178px;
  }

  .overdue {
    color: #E84026;
  }

  .refund {
    color: #2487E8;
  }

  .no-quota {
    margin-top: 200px;
  }

  // 上传图片相关
  .avatar-uploader .el-upload {
    border: 1px dashed #dcdfe6;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: var(--el-transition-duration-fast);
  }

  .avatar-uploader .el-upload:hover {
    border-color: #dcdfe6;
  }

  .el-icon.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 152px;
    height: 100px;
    text-align: center;
    border: 1px dashed #dcdfe6;
  }

  .avatar-uploader .avatar {
    width: 152px;
    height: 100px;
    display: block;
  }
}
</style>
